// 商品
<template>
  <div style="text-align:left;">
    <Button style="margin:10px; 0" size="small" type="primary" @click="showModel">结算</Button>
    <Table :columns="columns1" :data="data1" @on-selection-change="selectChange">
      <template slot-scope="{ row }" slot="productName">
        <span>{{row.commodity.productName}}</span>
      </template>
      <template slot-scope="{ row }" slot="price">
        <span>{{row.commodity.price}}</span>
      </template>
      <template slot-scope="{ row }" slot="total">
        <span>{{row.number * row.commodity.price}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button
          :disabled="row.commodity.state===0"
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="showOneModel(row)"
        >结算</Button>
      </template>
    </Table>
    <Modal v-model="modalShow" :footer-hide="true" :title="title">
      <div class="form-wap">
        <Form
          class="form-list"
          :model="item"
          :label-width="80"
          v-for="(item,index) in selectList"
          :key="`modal_${index}`"
        >
          <FormItem label="商品名称">{{item.commodity&&item.commodity.productName}}</FormItem>
          <FormItem label="单价">{{item.commodity&&item.commodity.price}}</FormItem>
          <FormItem label="购买数量">
            <InputNumber
              :max="item.commodity?item.commodity.number:1"
              :min="1"
              v-model="item.number"
            ></InputNumber>
          </FormItem>
          <FormItem
            label="总价"
          >{{ parseFloat(item.commodity&&item.commodity.price)*parseInt(item.number)}}</FormItem>
        </Form>
        <Row class="count">合计:{{count}}</Row>
        <Row style="text-align:right">
          <Button style="margin-right:5px" type="primary" @click="cancelFun()">取消</Button>
          <Button type="primary" @click="submitFun()">确认</Button>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getShoppingCart, addOrder, getAccount } from '@/api/user'

export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      title: '加入购物车',
      modalShow: false,
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '商品名称',
          slot: 'productName'
        },
        {
          title: '单价',
          slot: 'price'
        },
        {
          title: '购买数量',
          key: 'number'
        },
        {
          title: '合计',
          slot: 'total'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      data1: [],
      selectList: [], // 提交列
      tableSelectList: [], // 多选 选中列
      formItem: {
        id: '',
        userName: '',
        buyNumber: 2
      }
    }
  },
  computed: {
    count () {
      let res = 0
      this.selectList.forEach(item => {
        res += parseFloat(item.commodity && item.commodity.price) * parseInt(item.number)
      })
      return res
    }
  },
  methods: {
    cancelFun () {
      this.modalShow = false
    },
    submitFun () {
      if (this.title === '结算') {
        let list = this.selectList.map(item => {
          return {
            commodityId: item.commodity.id,
            realPrice: item.commodity.price,
            number: item.number,
            carId: item.id
          }
        })
        addOrder({
          userId: this.$store.state.userInfo.id,
          orderDetailList: list
        }).then(res => {
          if (res.code === 1) {
            this.modalShow = false
            this.$Message.success('购买成功！')
            this.getAccount()
            this.queryData()
          } else {
            this.$Message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        console.log('添加购物车')
      }
    },
    hrefFun () {
      this.$router.push({
        name: 'about'
      })
    },
    getAccount () {
      getAccount({
        userId: this.$store.state.userInfo.id
      }).then(res => {
        this.$store.commit('setAccount', res.data.balance)
      }).catch(err => {
        this.$Message.error(err)
      })
    },
    queryData () {
      getShoppingCart({
        userId: this.$store.state.userInfo.id,
        state: 1
      }).then(res => {
        if (res.code === 1) {
          this.data1 = res.data.map(item => {
            if (item.commodity.state === 0) {
              item._disabled = true
            }
            return item
          })
        } else {
          this.data1 = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 单结算
    showOneModel (row) {
      this.title = '结算'
      this.modalShow = true
      row.number = row.commodity.number > row.number ? row.number : row.commodity.number
      this.selectList = [row]
    },
    // 多结算
    showModel (row) {
      this.selectList = this.tableSelectList
      if (this.selectList.length > 0) {
        this.title = '结算'
        this.modalShow = true
      } else {
        this.$Message.warning('请选择购买商品！')
      }
    },
    selectChange (row) {
      row.forEach(element => {
        element.number = element.commodity.number > element.number ? element.number : element.commodity.number
      })
      this.tableSelectList = row
    }

  },
  mounted () {
    this.queryData()
  }
}
</script>
<style lang="less">
.form-wap {
  padding-right: 40px;
  .ivu-form-item {
    margin-bottom: 0;
  }
}
.form-wap .form-list {
  border-bottom: 1px solid gainsboro;
}
.form-wap .form-list:last-of-type {
  border-bottom: none;
}
.count {
  font-size: 14px;
  font-weight: bold;
  padding-left: 20px;
  padding-top: 10px;
}
</style>
